<template>
  <v-main class="full-height">
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3">
              <v-icon color="lighten-1">mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              修改密码
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0">
            <v-btn icon @click="commit" class="mr-n3">
              <v-icon color="primary" size="30">mdi-check</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container class="mt-15">
      <v-row justify="center" class="mt-5">
        <v-col cols="12" class="">
          <v-text-field class="py-0"
                        ref="oldPassword"
                        placeholder="请输入旧密码"
                        label="旧密码"
                        counter="12"
                        :rules="[rules.required,rules.password]"
                        v-model="data.oldPassword"
                        hint="长度6-12位，至少包含字母和数字和符号中两种"
                        :type="form.oldEye?'input':'password'"
          >
            <template v-slot:append>
              <v-btn icon>
                <v-icon size="30" v-if="form.oldEye" @click="form.oldEye=false">mdi-eye-outline</v-icon>
                <v-icon size="30" v-else @click="form.oldEye=true">mdi-eye-off-outline</v-icon>
              </v-btn>
            </template>
          </v-text-field>
        </v-col>
        <v-col cols="12" class="mt-0">
          <v-text-field class="py-0"
                        ref="newPassword"
                        placeholder="请输入新密码"
                        label="新密码"
                        counter="12"
                        :rules="[rules.required,rules.password]"
                        v-model="data.newPassword"
                        hint="长度6-12位，至少包含字母和数字和符号中两种"
                        :type="form.newEye?'input':'password'"
          >
            <template v-slot:append>
              <v-btn icon>
                <v-icon size="30" v-if="form.newEye" @click="form.newEye=false">mdi-eye-outline</v-icon>
                <v-icon size="30" v-else @click="form.newEye=true">mdi-eye-off-outline</v-icon>
              </v-btn>
            </template>
          </v-text-field>
        </v-col>
        <v-col cols="12" class="mt-0">
          <v-text-field class="py-0"
                        ref="confirmPassword"
                        placeholder="请再次确认新密码"
                        label="确认新密码"
                        counter="12"
                        :rules="[rules.required,rules.password]"
                        v-model="data.confirmPassword"
                        hint="长度6-12位，至少包含字母和数字和符号中两种"
                        :type="form.confirmEye?'input':'password'"
          >
            <template v-slot:append>
              <v-btn icon>
                <v-icon size="30" v-if="form.confirmEye" @click="form.confirmEye=false">mdi-eye-outline</v-icon>
                <v-icon size="30" v-else @click="form.confirmEye=true">mdi-eye-off-outline</v-icon>
              </v-btn>
            </template>
          </v-text-field>
        </v-col>

      </v-row>
    </v-container>
  </v-main>
</template>

<script>
import {rules, simpleCopy} from "../util/util";

export default {
  name: "ChangePassword",
  data: () => ({
    data: {
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      uid: ''
    },
    form: {
      oldEye: false,
      newEye: false,
      confirmEye: false
    },
    rules: rules

  }),
  methods: {
    commit() {
      // 遍历forms对象中的键调用validate验证
      let keys = Object.keys(this.data)
      let ok = false
      for (let key of keys) {
        if (this.$refs[key]) {
          ok = this.$refs[key].validate(true)
          if (!ok) return
        }
      }

      let data = this.data
      this.$http.post('user/changeInfo', data).then(res => {
        this.$emit('toast', '修改成功')
      }).catch(res => {
        this.$emit('toast', res.msg)
      })
    }
  },
}
</script>

<style scoped>

</style>
